<template>
	<view>
		<view v-if="!loading && addressList.length===0" class="empty-list">
			<img class="empty-image" src="@/static/images/empty.png">
			<text class="empty-text">目前还没有收货地址</text>
			<button class="empty-add-address-btn" type="primary">添加收货地址</button>
		</view>
		<view class="address-list" v-else>
			<view class="delete-btn">
				<button @click="patchDelete" type="primary">批量删除</button>
				<button @click="patchDelete('all')" type="primary">全部删除</button>
			</view>
			<view class="address-item" v-for="item in addressList" :key="item._id">
				<view class="address-info" @click="doSelect(item)">
					<icon class="select-icon" size=18 type="success" v-if="item.isSelected"></icon>
					<view class="address-con">
						<view class="address-user">
							<view class="user-name">{{item.userName}}</view>
							<view class="user-phone">{{item.phone}}</view>
						</view>
						<view class="address">
							{{item.address}}
						</view>
					</view>
				</view>
				<view class="address-play">
					<view class="play-default">
						<switch :checked="item.isDefault" disabled @click="doDefault(item)"
							style="transform: scale(0.5);" /><text
							:class="['default-text',item.isDefault?'is-default':'']">{{item.isDefault?'已设为默认':'设置为默认'}}</text>
					</view>
					<view class="play-btn">
						<view class="btn" @click="deleteAddress(item)">删除</view>
						<view class="btn" @click="editAddress(item)">编辑</view>
					</view>
				</view>
			</view>
			<!-- <button :disabled="!hasMore" type="warn" @click="getNextPage">下一页</button> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const hasMore = ref(true)
	const loading = ref(false)
	const addressList = ref([])
	const pageNum = ref(1)
	const pageSize = ref(10)
	const patchDelete = async (type) => {
		//this.selectedAddress
		let result
		if (type === 'all') {
			result = await addressObj.deleteData({
				type: 'all'
			})
		} else {
			result = await addressObj.deleteData({
				ids: this.selectedAddress
			})
		}
		uni.showToast({
			title: '删除成功',
			icon: 'success'
		})
		this.getAddressList()
	}
	const getAddressList = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		let res = await addressObj.getData({
			pageSize: pageSize.value,
			pageNum: pageNum.value
		})
		loading.value = false
		uni.hideLoading()
		addressList.value = res.data.map(item => ({
			...item,
			isSelected: false,
			isDefault: item.isDefault || false
		}))
		hasMore.value = res.hasMore
		console.log(res)
	}
</script>

<style lang="scss">
	.empty-list {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.empty-image {
			width: 300rpx;
			height: 250rpx;
		}

		.empty-text {
			margin: 20rpx 0;
			color: #ccc;
		}

		.empty-add-address-btn {
			border-radius: 46rpx;
		}
	}

	.address-list {
		// padding-top: 20rpx;
		padding-bottom: 128rpx;

		.delete-btn {
			display: flex;
			align-items: center;
		}

		.address-item {
			background: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx;

			.address-info {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #ccc;

				.select-icon {
					display: inline-block;
					margin-right: 15rpx;
				}

				.address-con {
					flex: 1;
					width: 0;

					.address-user {
						display: flex;
						align-items: center;

						.user-phone {
							margin-left: 200rpx;
						}
					}
				}

				.address {
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.address-play {
				padding-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.default-text {
					margin-left: -18rpx;
					display: inline-block;

					&.is-default {
						color: #1aad19;
					}
				}

				.play-btn {
					color: #ddd;
					display: flex;
					align-items: center;

					.btn {
						margin-left: 15rpx;
					}
				}

				.play-default {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>